<!-- 
  1. 当访问对象的某个属性得到undefined如果继续访问会报错？
     1. ?. 可选链 
     2. v-if  控制渲染时机  抛弃了首次空对象时的渲染 直接使用有数据之后的渲染
     
  2. 路由缓存
     产生的原因：vue-router默认就有一套缓存机制 性能考虑
     机制： 如果当前path没有发生变化 只是参数变化 直接复用path对应的组件而不是重新渲染

     解决缓存问题的思想：
       1. 破坏缓存  2.id变化时做接口数据的重新获取

     1. 破坏缓存
        router-view + 独一无二的key 就可以做到不走缓存
        $route.fullPath
        简单粗暴  存在一定的浪费 不够精确

     2. onBeforeRouteUpdate
        路由发生变化时（id）都会重新执行回调函数 在回调函数中重新使用最新的id获取最新的数据渲染
        onBeforeRouteUpdate((to)=>{
          // to.params.id 最新的id
        })
        需要写额外的代码 比较复杂 够精确
       
    在很多时候  推荐使用直接加key  足够简单 
    如果真的出现了性能问题 或者一个组件内部有很多很多个子组件 为了避免重复渲染 使用方案二
  
  3. v-model难点
     语法糖的本质 三个事情
      1. modelValue
      2. update:modelValue
      3. 自动更新

    封装的一般套路
     1. 父到子
        const num = ref(props.modelValue)
        watch(()=>props.modelValue,()=>num.value = props.modelValue)
     2. 子到父
        emit('update:modelValue', num.value)

  4. 热榜区域
     prop作为判断条件而使用 
     我们可以在组件多次使用的时候给他传下去一个不同的数据
     有了这个数据 我们组件内部也就有了判断条件 可以根据这个
     判断条件产出不同的行为样式表现（拿到了不同的接口数据 / 适配title）
 -->

 <!-- 
   作业
   封装一个输入框组件,实现基于prop的双向绑定
   <h-input v-model="msg"/>
  -->